<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto">
      <!--搜索条件-->
      <el-row>
        <el-form-item label="店铺" prop="storeIdList">
          <el-select v-model="queryParams.storeIdList" multiple collapse-tags filterable clearable
                     @keyup.enter.native="handleQuery" @change="clearStoreIdList()" placeholder="请选择店铺">
            <el-option v-for="item in storeMgmtList" :key="item.id" :label="item.storeAbbr"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事业部" prop="divNameList">
          <el-select v-model="queryParams.divNameList" multiple collapse-tags filterable clearable
                     @keyup.enter.native="handleQuery" @change="clearDivNameList()" placeholder="请选择事业部">
            <el-option v-for="item in divNameOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品标签" prop="mainLabelList">
          <div v-for="(item, index) in queryParams.mainLabelList" :key="index" style="float: left;">
            <el-input placeholder="请输入商品标签" v-model="queryParams.mainLabelList[index]"
                      @keyup.enter.native="handleQuery" @change="clearMainLabelList()" clearable
                      style="float: left;width: calc(100% - 35px);"></el-input>
            <el-button type="danger" icon="el-icon-delete-solid" @click="queryParams.mainLabelList.splice(index, 1)"
                       circle style="float: right;margin-right: 3px;"></el-button>
          </div>
          <el-button type="primary" icon="el-icon-plus" @click="queryParams.mainLabelList.push('')" circle
                     style="float: left;margin-left: 3px;"></el-button>
        </el-form-item>
        <el-form-item label="负责人" prop="storeLeaderList">
          <el-select v-model="queryParams.storeLeaderList" multiple collapse-tags filterable clearable
                     @keyup.enter.native="handleQuery" @change="clearStoreLeaderList()" placeholder="请选择负责人">
            <el-option v-for="item in leaderList" :key="item.userId" :label="item.nickName"
                       :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="周期" prop="statCycle">
          <el-select v-model="queryParams.statCycle" placeholder="请选择">
            <el-option label="7天" :value="7"/>
            <el-option label="15天" :value="15"/>
            <el-option label="30天" :value="30"/>
          </el-select>
        </el-form-item>
        <el-form-item label="统计日期" prop="statDate">
          <el-date-picker clearable
                          v-model="queryParams.statDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择统计日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上新日期" prop="upNewDate">
          <el-date-picker
            v-model="queryParams.upNewDateRange"
            @change="upNewDateChange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="支付金额" prop="payAmount">
          <el-input v-model="queryParams.payAmountMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.payAmountMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item label="增降%(支付金额)" prop="amountCrease">
          <el-input v-model="queryParams.amountCreaseMin" placeholder="请输入"
                    style="width: 150px;">
            <template #suffix>%</template>
          </el-input>
          <span> - </span>
          <el-input v-model="queryParams.amountCreaseMax" placeholder="请输入"
                    style="width: 150px;">
            <template #suffix>%</template>
          </el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="增降%(支付买家数)" prop="payBuyerCrease">
          <el-input v-model="queryParams.payBuyerCreaseMin" placeholder="请输入"
                    style="width: 150px;">
            <template #suffix>%</template>
          </el-input>
          <span> - </span>
          <el-input v-model="queryParams.payBuyerCreaseMax" placeholder="请输入"
                    style="width: 150px;">
            <template #suffix>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="增降%(商品访客数)" prop="goodsVisitorCrease">
          <el-input v-model="queryParams.goodsVisitorCreaseMin" placeholder="请输入"
                    style="width: 150px;">
            <template #suffix>%</template>
          </el-input>
          <span> - </span>
          <el-input v-model="queryParams.goodsVisitorCreaseMax" placeholder="请输入"
                    style="width: 150px;">
            <template #suffix>%</template>
          </el-input>
        </el-form-item>
      </el-row>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="resetQuery"></right-toolbar>
    </el-row>

    <div ref="divTable">
      <el-table :height="showSearch?'46vh':'68vh'" v-loading="loading" :key="tableTime" :data="declineWarnDataList" @sort-change='sortChange'>
        <el-table-column
          v-if="queryParams.storeIdList.length === 0 && queryParams.mainLabelList.length === 0 && queryParams.storeLeaderList.length === 0 && queryParams.divNameList.length === 0"
          prop="storeName" label="店铺" width="120"></el-table-column>
        <el-table-column v-if="queryParams.storeIdList.length !== 0" prop="storeName" label="店铺"
                         width="120"></el-table-column>
        <el-table-column v-if="queryParams.mainLabelList.length !== 0" prop="mainLabel"
                         label="商品标签"></el-table-column>
        <el-table-column v-if="queryParams.storeLeaderList.length !== 0" prop="storeLeader"
                         label="负责人" width="120"></el-table-column>
        <el-table-column v-if="queryParams.divNameList.length !== 0" prop="divName" label="事业部"
                         width="120"></el-table-column>
        <el-table-column label="商品ID" align="center" prop="goodsId" width="120"/>
        <el-table-column label="商品图片" align="center" prop="imgUrl" width="120">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.imgUrl"
              :preview-src-list="[scope.row.imgUrl]"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品标签" align="center" prop="goodsLabel" width="120"/>
        <el-table-column label="支付金额" align="center" prop="payAmount" width="120" sortable='custom'/>
        <el-table-column label="增降%(支付金额)" align="center" prop="amountCrease" width="120">
          <template slot-scope="scope">
            {{ scope.row.amountCrease }}%
          </template>
        </el-table-column>
        <el-table-column label="支付买家数" align="center" prop="payBuyerNumber" width="110" sortable='custom'/>
        <el-table-column label="增降%(支付买家数)" align="center" prop="payBuyerCrease" width="140">
          <template slot-scope="scope">
            {{ scope.row.payBuyerCrease }}%
          </template>
        </el-table-column>
        <el-table-column label="商品访客数" align="center" prop="goodsVisitorNumber" width="110" sortable='custom'/>
        <el-table-column label="增降%(商品访客数)" align="center" prop="goodsVisitorCrease" width="140">
          <template slot-scope="scope">
            {{ scope.row.goodsVisitorCrease }}%
          </template>
        </el-table-column>
        <el-table-column label="商品转化率" align="center" prop="goodsPayConversionRatio" width="120" sortable='custom'>
          <template slot-scope="scope">
            {{ scope.row.goodsPayConversionRatio }}%
          </template>
        </el-table-column>
        <el-table-column label="推广占比" align="center" prop="promotionRatio">
          <template slot-scope="scope">
            {{ scope.row.promotionRatio }}%
          </template>
        </el-table-column>
        <el-table-column label="推广投产比" align="center" prop="promotionRoi" width="120"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
          <template slot-scope="scope">
            <span style="color: #67C23A" v-if="scope.row.backLogCount!==null&&scope.row.backLogCount>0">
              近30天内已生成
            </span>
            <el-button
              :disabled="scope.row.isGenerateFlag"
              type="text"
              icon="el-icon-circle-plus"
              @click="handleGenerate(scope.row, scope.$index)"
            >生成下滑预警
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :pageRefs="this.$refs"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import {getNormalStoreMgmtList, getStoreLeaderList} from "@/api/business/storeMgmt";
import {getDeclineWarnBoardData} from "@/api/business/declineWarnBoard";
import {addDeclineBacklog} from "@/api/business/declineBacklog";

export default {
  name: "DeclineWarnBoard",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      //下滑预警看板集合数据
      declineWarnDataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeIdList: [],
        divNameList: [],
        mainLabelList: [],
        storeLeaderList: [],
        statCycle: null,
        statDate: null,
        upNewDateRange: null,
        upNewDateStart: null,
        upNewDateEnd: null,
        payAmountMin: 2000,
        payAmountMax: null,
        amountCreaseMin: null,
        amountCreaseMax: null,
        payBuyerCreaseMin: null,
        payBuyerCreaseMax: null,
        goodsVisitorCreaseMin: null,
        goodsVisitorCreaseMax: null,
      },
      // 刷新表格
      tableTime: 0,
      //店铺集合
      storeMgmtList: [],
      //事业部集合
      divNameOptions: [{
        value: '海报事业部',
        label: '海报事业部'
      }, {
        value: '3C事业部',
        label: '3C事业部'
      }],
      //负责人集合
      leaderList: [],
    }
  },
  created() {
    this.getNormalStoreMgmtList()
    this.getStoreLeaderList()
  },
  methods: {
    //后端全页面动态排序
    sortChange(column){
      this.queryParams.order=null
      this.queryParams.prop=null
      if (column.order==="ascending"){
        this.queryParams.order="asc"
      }else if (column.order==="descending"){
        this.queryParams.order="desc"
      }

      this.queryParams.prop=column.prop;

      this.getList()
    },
    getList() {
      this.loading = true;
      getDeclineWarnBoardData(this.queryParams).then(response => {
        this.declineWarnDataList = response.rows;
        this.declineWarnDataList.forEach(item => {
          this.$set(item, 'isGenerateFlag', false);
        })
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let queryParams = {...this.queryParams}
      if (queryParams.storeIdList.length === 0 && queryParams.mainLabelList.length === 0 && queryParams.storeLeaderList.length === 0 && queryParams.divNameList.length === 0) {
        this.$message.error('请选择店铺/事业部/商品标签/负责人！！！！');
        return false
      }
      if (queryParams.statCycle === null) {
        this.$message.error('请选择周期！！！！');
        return false
      }
      if (queryParams.statDate === null) {
        this.$message.error('请选择统计日期！！！！');
        return false
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$resetForm("queryForm");
      this.queryParams.upNewDateRange = []
      this.queryParams.upNewDateStart = null
      this.queryParams.upNewDateEnd = null
      this.declineWarnDataList = []
      this.total = 0
    },
    //查询店铺列表
    getNormalStoreMgmtList() {
      getNormalStoreMgmtList().then(res => {
        this.storeMgmtList = res.data
      })
    },
    /** 查询店铺负责人列表 */
    getStoreLeaderList() {
      getStoreLeaderList().then(res => {
        this.leaderList = res.data
      })
    },
    //上新日期组件改变值
    upNewDateChange() {
      this.queryParams.upNewDateStart = this.queryParams.upNewDateRange[0]
      this.queryParams.upNewDateEnd = this.queryParams.upNewDateRange[1]
    },
    clearStoreIdList() {
      this.queryParams.storeLeaderList = []
      this.queryParams.mainLabelList = []
      this.queryParams.divNameList = []
    },
    clearStoreLeaderList() {
      this.queryParams.storeIdList = []
      this.queryParams.mainLabelList = []
      this.queryParams.divNameList = []
    },
    clearMainLabelList() {
      this.queryParams.storeIdList = []
      this.queryParams.storeLeaderList = []
      this.queryParams.divNameList = []
    },
    clearDivNameList() {
      this.queryParams.storeIdList = []
      this.queryParams.storeLeaderList = []
      this.queryParams.mainLabelList = []
    },
    //生成待办事项
    handleGenerate(row, index) {
      addDeclineBacklog(row).then(response => {
        this.$set(row, 'isGenerateFlag', true)
        this.$modal.msgSuccess("生成预警成功");
      })
    }
  }
}
</script>
